<!DOCTYPE html>
<html>
<head>
    <title>Web Kubectl</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" type="image/png" href="./terminal/favicon.png?_t=#app.Version">
    <link rel="stylesheet" href="./terminal/css/index-lib.css?_t=#app.Version"/>
    <link rel="stylesheet" href="./terminal/css/index.css?_t=#app.Version"/>
    <script src="./terminal/js/index-lib.js?_t=#app.Version"></script>
    <script src="./terminal/js/index.js?_t=#app.Version"></script>
</head>

<body ng-app="App" ng-cloak>
<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand">Web Kubectl</a>
    <a class="header-link" href="https://github.com/KubeOperator/webkubectl" target="_blank">
        <svg height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
            <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
        </svg>
    </a>
</nav>
<div class="container" ng-controller="IndexCtrl" ng-cloak>
    <div class="mt-5 my-3 p-3 bg-white rounded shadow-sm">
        <div class="card-body">
            <h6 class="card-title">Sessions</h6>
            <div class="list-group list-group-flush">
                <div class="list-group-item" ng-repeat="item in items">
                    <div class="d-flex flex-row justify-content-between">
                        <div class="d-flex flex-column small">
                            <strong class="text-gray-dark" ng-bind="item.name"></strong>
                            <small ng-bind="item.type"></small>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                            <button class="btn btn-success btn-sm" ng-click="connect(item)">Connect</button>
                            <button class="ml-2 btn btn-secondary btn-sm" data-toggle="modal" data-target="#delete" ng-click="confirm(item)">Delete</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="float-right mt-3">
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add">New Session</button>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="modal fade" id="add" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">New Session</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="radio_config" name="type" class="custom-control-input"
                                   value="Kube Config" ng-model="item.type" ng-check="true">
                            <label class="custom-control-label" for="radio_config">Kube Config</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="radio_token" name="type" class="custom-control-input"
                                   value="Token" ng-model="item.type">
                            <label class="custom-control-label" for="radio_token">Token</label>
                        </div>

                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" id="name" ng-model="item.name"
                                   placeholder="Enter name">
                        </div>
                        <div class="form-group" ng-show="item.type == 'Token'">
                            <label for="apiserver">ApiServer</label>
                            <input type="text" class="form-control" id="apiserver" ng-model="item.apiServer"
                                   placeholder="Enter apiserver">
                        </div>
                        <div class="form-group" ng-show="item.type == 'Token'">
                            <label for="token">Token</label>
                            <input type="text" class="form-control" id="token" ng-model="item.token"
                                   placeholder="Enter token">
                        </div>

                        <div class="input-group" ng-show="item.type == 'Kube Config'">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="file">
                                <label class="custom-file-label" for="file" data-browse="Upload">Upload a kube
                                    config</label>
                            </div>
                        </div>
                        <div class="alert alert-warning alert-dismissible fade show mt-3" role="alert" ng-if="msg">
                            {{msg}}
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" ng-click="save()">Save</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Session</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body"> Do you want to delete this session? </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="delete(item)">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer bg-dark footer-show">
    <a href="https://www.fit2cloud.com" target="_blank">Powered by FIT2CLOUD, www.fit2cloud.com.</a>
    <span class="version">#app.Version</span>
</div>
</body>
</html>